@charset "utf-8";
//计算根的像素大小
@function r($px) {
    @return ($px / 40) *1rem;
}

//计算减半的函数
@function half($px) {
    @return ($px / 2) *1px;
}

$color_them: #ffa969;
$font_size:r(30);
@mixin a_block {
    display: block;
    width: 100%;
    height: 100%;
}

@mixin middle {
    vertical-align: middle;
    display: inline-block;
}

header {
    position: absolute;
    top: 0;
    width: r(750);
    height: half(150);
    padding: half(17) half(23) half(10);
    box-sizing: border-box;
    // logo
    .logo {
        width: half(123);
        height: half(123);
        a {
            @include a_block;
            img {
                width: 100%;
            }
        }
    }
    .select_1 {
        margin-top: half(36);
        margin-right: half(20);
    }
    .searchBar {
        width: r(276);
        height: half(50);
        border: 1px solid $color_them;
        border-radius: half(50);
        overflow: hidden;
        margin: half(34) auto 0;
        input[type="search"] {
            width: calc(100% - 30px);
            height: 100%;
            vertical-align: top;
            border: none;
            padding-left: 12px;
            font-size: 12px;
        }
        input[type="image"] {
            height: half(36);
            vertical-align: top;
            margin-top: half(9);
        }
    }
}

#main {
    position: absolute;
    top: half(150);
    bottom: half(135);
    width: r(750);
    //多出部分滚动
    overflow: scroll;
    // 滚动条产生滚动回弹的效果
    -webkit-overflow-scrolling: touch;
    // 轮播图
    .swiper-container {
        width: 100%;
        height: r(285);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .content_wrapper {
        padding: half(35) half(20) 0;
        // 优惠团购
        .preferential,
        .love {
            .content_dd {
                height: r(58);
            }
            .info_left {
                font-size: 0;
                .info_left_img,
                h2 {
                    @include middle;
                }
                .info_left_img {
                    width: r(56);
                    height: r(53);
                    img {
                        width: 100%;
                    }
                }
                h2 {
                    margin-left: r(8);
                    font-size: $font_size;
                }
            }
            .info_right {
                font-size: 0;
                margin-top: r(9);
                h2,
                .more {
                    @include middle;
                }
                h2 {
                    font-size: r(24);
                    margin-right: r(8);
                }
                .more {
                    width: r(25);
                    height: r(26);
                    a {
                        @include a_block;
                        img {
                            width: 100%;
                        }
                    }
                }
            }
            .content_img {
                padding: half(17) 0 half(8) 0;
                ul {
                    font-size: 0;
                    li {
                        border: 1px solid #dbe4f5;
                        border-bottom: 0;
                        width: r(239);
                        height: r(93);
                        margin: 0 r(51) half(29);
                        a {
                            @include a_block;
                            img {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        .love {
            .content_detail_top,
            .content_detail_bottom {
                margin-top: r(34);
                .sushi,
                .balck_duck {
                    width: r(210);
                    height: r(164);
                    margin-right: r(22);
                    a {
                        @include a_block;
                        img {
                            width: 100%;
                        }
                    }
                }
                .content_title {
                    margin-top: r(28);
                    h2 {
                        font-size: $font_size;
                    }
                    strong {
                        display: inline-block;
                        font-size: half(22);
                        margin: r(18) 0 r(22) 0;
                        color: #494949;
                    }
                    p {
                        font-size: r(32);
                        color: #ff9344;
                    }
                }
                .content_r {
                    position: relative;
                    text-align: right;
                    h3,
                    h4 {
                        font-size: half(22);
                        color: #494949;
                    }
                    h3 {
                        margin: r(36) 0 r(68) 0;
                    }
                }
            }
        }
    }
}